import React from 'react'
import PropTypes from 'prop-types'
import { sexTypeData } from 'utils/seletLocalData'
import moment from 'moment'
import { config, SelectProps } from 'utils'
import { titleType } from 'enums'
import { Form, Input, Row, Col, Button, Icon, DatePicker, Select } from 'antd'
import { connect } from 'dva'
import { routerRedux } from 'dva/router'
import styles from '../../../themes/detail.less'

const FormItem = Form.Item
const ButtonGroup = Button.Group
const Option = Select.Option

const formItemLayout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
}


const ButtonProps = {
  size: 'large',
  style: {
    marginBottom: 0,
  },
}
const EntityDirectorData = ({
  entityDirectorData,
  dispatch,
  loading,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
}) => {
  const dateFormat = 'YYYY/MM/DD'
  const { person, role, editType, countryCodeData, entityId, roleOptions } = entityDirectorData
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const values = {
        ...getFieldsValue(),
      }
      const data = {
        ...person,
        ...values,
        role: values.role,
      }
      data.entityId = entityId || 1
      dispatch({
        type: `entityDirectorData/${editType}`,
        payload: data,
      })
    })
  }

  const onAddress = () => {
    dispatch(routerRedux.push({
      pathname: `/address/${person.id}/entityDirectorAddress`,
    }))
  }

  const onPhone = () => {
    dispatch(routerRedux.push({
      pathname: `/phone/${person.id}/entityDirectorPhone`,
    }))
  }

  const sexData = sexTypeData.map(d => <Option key={d.key}>{d.value}</Option>)
  const countryCode = countryCodeData.map(d => <Option key={d.code}>{d.name}</Option>)
  const roleSelectOptions = roleOptions.map(d => <Option key={d.code}>{d.name}</Option>)
  const titleData = titleType.map(d => <Option key={d.key}>{d.value}</Option>)
  return (
    <Form layout="horizontal">
      {
        (editType === 'update') ? <div className={styles.div_buttonGroup}>
          <ButtonGroup {...ButtonProps}>
            <Button onClick={onPhone}>
              Phone<Icon type="phone" />
            </Button>
            <Button onClick={onAddress}>
              Address<Icon type="environment-o" />
            </Button>
          </ButtonGroup>
        </div> : <div />
      }
      <div className={styles.div_buttonGroup}>
        <ButtonGroup {...ButtonProps}>
          <Button onClick={handleOk}>
            Save<Icon type="save" />
          </Button>
        </ButtonGroup>
      </div>
      <div className={styles.div_form}>
        <div className={styles.title}>BasicInfo</div>
        <Row gutter={0}>
          <Col span={8}>
            <FormItem label="Role" hasFeedback {...formItemLayout}>
              {getFieldDecorator('role', {
                initialValue: role,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select {...SelectProps}>{roleSelectOptions}</Select>)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="FirstName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('firstName', {
                initialValue: person.firstName,
                rules: [
                  {
                    required: true,
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="MiddleName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('middleName', {
                initialValue: person.middleName,
                rules: [
                  {
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="LastName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('lastName', {
                initialValue: person.lastName,
                rules: [
                  {
                    required: true,
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Title" hasFeedback {...formItemLayout}>
              {getFieldDecorator('title', {
                initialValue: person.title,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }}{...SelectProps}>{titleData}</Select>)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Alias" hasFeedback {...formItemLayout}>
              {getFieldDecorator('alias', {
                initialValue: person.alias,
                rules: [
                  {
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Birthdate" hasFeedback {...formItemLayout}>
              {getFieldDecorator('birthdate', {
                initialValue: person.birthdate ? moment(person.birthdate, dateFormat) : '',
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<DatePicker style={{ width: '100%' }} format={dateFormat} />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Gender" hasFeedback {...formItemLayout}>
              {getFieldDecorator('gender', {
                initialValue: person.gender,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }}>{sexData}</Select>)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="BirthPlace" hasFeedback {...formItemLayout}>
              {getFieldDecorator('birthPlace', {
                initialValue: person.birthPlace,
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <div className={styles.title}>IdentityInfo</div>
        <Row gutter={0}>
          <Col span={8}>
            <FormItem label="Nationality1" hasFeedback {...formItemLayout}>
              {getFieldDecorator('nationality1', {
                initialValue: person.nationality1,
              })(<Select style={{ width: '100%' }} {...SelectProps}>{countryCode}</Select>)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Nationality2" hasFeedback {...formItemLayout}>
              {getFieldDecorator('nationality2', {
                initialValue: person.nationality2,
              })(<Select style={{ width: '100%' }} {...SelectProps}>{countryCode}</Select>)}
            </FormItem>
          </Col>
        </Row>
        <div className={styles.title}>OtherInfo</div>
        <Row gutter={0}>
          <Col span={8}>
            <FormItem label="Occupation" hasFeedback {...formItemLayout}>
              {getFieldDecorator('occupation', {
                initialValue: person.occupation,
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Residence" hasFeedback {...formItemLayout}>
              {getFieldDecorator('residence', {
                initialValue: person.residence,
                rules: [
                  {
                    max: 255,
                  },
                ],
              })(<Select style={{ width: '100%' }} {...SelectProps}>{countryCode}</Select>)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={0}>
          {/*<Col span={8}>*/}
            {/*<FormItem label="IRD Number" hasFeedback {...formItemLayout}>*/}
              {/*{getFieldDecorator('irdNumber', {*/}
                {/*initialValue: person.irdNumber,*/}
              {/*})(<Input />)}*/}
            {/*</FormItem>*/}
          {/*</Col>*/}
          <Col span={8}>
            <FormItem label="Employer Name" hasFeedback {...formItemLayout}>
              {getFieldDecorator('employerName', {
                initialValue: person.employerName,
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Source of Wealth" hasFeedback {...formItemLayout}>
              {getFieldDecorator('sourceOfWealth', {
                initialValue: person.sourceOfWealth,
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="SSN" hasFeedback {...formItemLayout}>
              {getFieldDecorator('ssn', {
                initialValue: person.ssn,
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Comments" hasFeedback {...formItemLayout}>
              {getFieldDecorator('comments', {
                initialValue: person.comments,
              })(<Input.TextArea rows={4} />)}
            </FormItem>
          </Col>
        </Row>
      </div>
    </Form>

  )
}

EntityDirectorData.propTypes = {
  form: PropTypes.object.isRequired,
  dispatch: PropTypes.func,
  entityDirectorData: PropTypes.object,
  loading: PropTypes.object,
}

export default connect(({ entityDirectorData, loading }) => ({ entityDirectorData, loading }))(Form.create()(EntityDirectorData))

